<template>
	<view :style="themeColor">
		<view class="page">
			<view class="flex flex-direction flex-wrap align-stretch benben-position-layout flex skillDetails_flex_0"
				:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
				<view class='flex flex-wrap align-center justify-between skillDetails_fd0_0'>
					<view class='flex flex-wrap align-center skillDetails_fd0_0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">
						<text class='fu-iconfont2  skillDetails_fd0_0_c0_c0'>&#xE794;</text>
					</view>
					<view class='flex flex-wrap align-center'>
						<text class='skillDetails_fd0_0_c1_c0'>技能讲解详情</text>
					</view>
					<view class='flex align-center justify-end skillDetails_fd0_0_c0'>
					</view>
				</view>

			</view>
			<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center">

				<video class='flex  skillDetails_fd1_0' :poster="chapterDetails.shipin.thumb"
					:src="chapterDetails.shipin.path" controls='true' x5-video-player-type="h5"
					:enable-progress-gesture='true' object-fit="fill" @ended="overFunc()"></video>

			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout skillDetails_flex_2">
				<text class='skillDetails_fd2_0'>{{chapterDetails.wenben}}</text>
			</view>

			<!---flex布局flex布局结束-->
			<!---flex布局flex布局开始-->
			<view class="flex benben-flex-layout flex-wrap align-center skillDetails_flex_3">
				<view class='flex flex-wrap align-center'>
					<image class='skillDetails_fd3_0_c0' mode="aspectFill" :src='STATIC_URL+"60.png"'></image>
					<text class='skillDetails_fd3_0_c1'>视频介绍</text>
				</view>
			</view>

			<!---flex布局flex布局结束-->
			<view class="ben_fu-jyf-parser_4">
				<jyf-parser :html="chapterDetails.shipingjieshao | richTextFormat"></jyf-parser>
			</view>


		</view>
	</view>
</template>
<script>
	import {
		validate
	} from '@/common/utils/validate.js'

	export default {
		components: {},


		data() {
			return {
				"chapterDetails": {
					"aid": "",
					"freexianshangkecheng_kechengmingcheng": "",
					"wenben": "",
					"shipin": {
						"name": "",
						"driver": "",
						"path": "",
						"thumb": "",
						"mime": "",
						"duration": ""
					},
					"create_time": "",
					"kechengfengmian": "",
					"shipingjieshao": ""
				},
				"freexuexirenwu_id": "",
				"freexianshangkecheng_id": "",
				"id": ""
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			let {
				freexuexirenwu_id,
				freexianshangkecheng_id,
				id
			} = options
			if (freexuexirenwu_id !== undefined) this.freexuexirenwu_id = freexuexirenwu_id
			if (freexianshangkecheng_id !== undefined) this.freexianshangkecheng_id = freexianshangkecheng_id
			if (id !== undefined) this.id = id
			this.getChapterDetailsFunc()
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			//获取章节详情
			async getChapterDetailsFunc() {
				//请求方法
				//数据验证

				let datachapterDetails = await this.$api.get(global.apiUrls.post63d8ef2f0614a, {
					aid: this.id
				});

				if (datachapterDetails.data.code != 1) {
					this.$message.info(datachapterDetails.data.msg);
					return
				}
				let infochapterDetails = datachapterDetails.data;
				this.chapterDetails = infochapterDetails.data

			},
			//课程完成
			async overFunc() {
				//请求方法
				//数据验证

				let data63d8e60ccc4ac = await this.$api.post(global.apiUrls.post63d8e60ccc4ac, {
					freexuexirenwu_id: this.freexuexirenwu_id,
					freexianshangkecheng_id: this.freexianshangkecheng_id,
					freekechengguanli_id: this.id
				});

				if (data63d8e60ccc4ac.data.code != 1) {
					this.$message.info(data63d8e60ccc4ac.data.msg);
					return
				}



			}
		}
	};
</script>
<style lang="scss" scoped>
	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: #fff;
		background-size: 100% auto;
	}

	.skillDetails_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.skillDetails_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
	}

	.skillDetails_fd0_0_c0_c0 {
		font-size: 36rpx;
		color: #333;
		font-weight: 500;
	}

	.skillDetails_fd0_0_c0 {
		width: 100rpx;
	}

	.skillDetails_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		line-height: 88rpx;
	}

	.skillDetails_fd1_0 {
		width: 750rpx;
		height: 400rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.skillDetails_flex_2 {
		padding: 32rpx 32rpx 24rpx 32rpx;
	}

	.skillDetails_fd2_0 {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
	}

	.skillDetails_flex_3 {
		border-top: 10px solid rgba(248, 248, 248, 1);
		padding: 32rpx 32rpx 32rpx 32rpx;
	}

	.skillDetails_fd3_0_c1 {
		font-size: 32rpx;
		font-weight: 700;
		color: #333;
		margin: 0rpx 0rpx 0rpx 16rpx;
	}

	.skillDetails_fd3_0_c0 {
		width: 6rpx;
		height: 28rpx;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}

	.ben_fu-jyf-parser_4 {
		background-color: #fff;
		padding-left: 32rpx;
		padding-right: 32rpx;
		padding-top: 0rpx;
		padding-bottom: 32rpx;

	}
</style>